<template>
  <BasicMenuItem v-if="!menuHasChildren(item) && getShowMenu" v-bind="$props" />
  <SubMenu
    v-if="menuHasChildren(item) && getShowMenu"
    :class="[theme]"
    :key="`submenu-${item.path}`"
    popupClassName="app-top-menu-popup"
  >
    <template #title>
      <MenuItemContent v-bind="$props" :item="item" />
    </template>

    <template
      v-for="childrenItem in item.children || []"
      :key="childrenItem.path"
    >
      <BasicSubMenuItem v-bind="$props" :item="childrenItem" />
    </template>
  </SubMenu>
</template>
<script lang="ts">
import type { Menu as MenuType } from '@/router/types'
import { defineComponent, computed } from 'vue'
import { Menu } from 'ant-design-vue'
import { useDesign } from '@/hooks/web/useDesign'
import { itemProps } from '../props'
import BasicMenuItem from './BasicMenuItem.vue'
import MenuItemContent from './MenuItemContent.vue'

export default defineComponent({
  name: 'BasicSubMenuItem',
  isSubMenu: true,
  components: {
    BasicMenuItem,
    SubMenu: Menu.SubMenu,
    MenuItemContent,
  },
  props: itemProps,
  setup(props) {
    const { prefixCls } = useDesign('basic-menu-item')

    const getShowMenu = computed(() => !props.item.meta?.hideMenu)
    function menuHasChildren(menuTreeItem: MenuType): boolean {
      return (
        !menuTreeItem.meta?.hideChildrenInMenu &&
        Reflect.has(menuTreeItem, 'children') &&
        !!menuTreeItem.children &&
        menuTreeItem.children.length > 0
      )
    }
    return {
      prefixCls,
      menuHasChildren,
      getShowMenu,
    }
  },
})
</script>
